<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <div>
            <h3 v-for="(l,i) in items" v-bind:key="i">
                {{l.message}} - {{i}}
            </h3>
        </div>
        <div>
            <h4 v-for="(value,key,index) in object" :key="index">
                {{key}} : {{value}} - {{index}}
            </h4>
        </div>
        <div>
            <h3>省市区二级联动</h3>
            <ul>
                <li v-for="(pro,index) in provinces" :key="index">
                    省份：{{pro.name}} -- {{index}}
                    <ol>
                        <li v-for="(city,i) in pro.cities" :key="i">
                            {{city.name}}
                        </li>
                    </ol>
                </li>
            </ul>

            <ul>
                <li v-for="(car,key,index) in cars" :key="key">
                    <p>序号:{{index+1}}</p>
                    <p>品牌:{{car.brand}}</p>
                    <p>型号:{{car.model}}</p>
                    <p>颜色:{{car.color}}</p>
                </li>
            </ul>
        </div>
        <div>
            <h2 v-for="(l,i) in list" :kye="i">
                {{l}}
            </h2>

        </div>
    </div>
</body>
<script>
    var provinces = [{
        name: "浙江",
        cities: [{
            name: '金华',
        }, {
            name: '杭州'
        }, {
            name: '温州'
        },]
    }, {
        name: "湖北",
        cities: [{
            name: '武汉'
        }, {
            name: '襄樊'
        }, {
            name: '黄冈'
        },]
    }, {
        name: "江苏",
        cities: [{
            name: '南京'
        }, {
            name: '徐州'
        }, {
            name: '连云港'
        },]
    }];
    var cars = {
        car01: { brand: "Ford", model: "Mustang", color: "red" },
        car02: { brand: "Fiat", model: "500", color: "white" },
        car03: { brand: "Volvo", model: "XC90", color: "black" }
    }
    const vm = new Vue({
        data: {
            title: "v-for  遍历循环数组和对象   ",
            items: [
                { message: 'Foo' },
                { message: 'Bar' },
                { message: 'Jobs' },
                { message: 'Tom' },
                { message: 'Dave' },
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            provinces,
            cars,
            list: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'J']
        }
    }).$mount("#app")

    var a = [1, 2, 3, 4]
    var b = a;   // 浅拷贝
    b.push(5)
    var c = [...b]  // 深拷贝
    c.push(6)
    console.log(a);
    console.log(b);
    console.log(c);

    var obj = {
        a: {
            b: {
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        }
    }
    var obj = { a: 1 } //浅复制

    // vm.list.push("eee")
    // vm.list.unshift("aaa")
    // vm.list.pop()
    // vm.list.shift()
    // vm.list.splice(2, 1)    // 删除
    // vm.list.splice(2, 0, "2222") // 新增
    // vm.list.splice(2, 1, "cc")  // 修改
    // vm.list.reverse()

    // vm.list = vm.list.concat(["hhh", "zzz"])
    // vm.list = vm.list.filter((l, i) => i % 2 == 0)
    // vm.list = vm.list.slice(1, 4)
    // Vue.set(vm.list, 0, "aaaaa")
    // vm.$set(vm.list, 1, "bbbbb")

    // Vue.delete(vm.list, 0)
    // vm.$delete(vm.list, 0)



</script>
<!-- 
    v-for
        v-for   列表渲染    指令可以渲染数组和对象
        v-for="(item,index) in items" v-bind:key="index"
        v-for="(value,key,index) in objecct" 遍历对象

        虚拟DOM     性能优化
        key     为了给Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
        你需要为每项提供一个唯一 key属性

        Vue 识别节点的一个通用机制  一个组件添加 key key值更改  组件强制刷新

        深浅拷贝    ... 展开运算符  JOSN.pares 递归
        深浅复制    object.assign
        深度监听

        数据类型
        基本数据类型 String Number  Boolean null    undefined   （不可变对象 深拷贝）
        引用数据类型    对象    数组    （可变对象 浅拷贝）

        不可变对象 基本数据类型 immutable 修改不可变对象 响应式系统一定检测到数据更新
        可变对象    引用数据类型    mutable 修改可变对象  可能 响应式系统无法检测到数据更新

        Vue 响应式视图 可以检测 不可变对象的数据修改    可变对象  有的时候监测不到 （响应式视图系统会监测可变对象第一层的数据改变）
        修改 基本数据类型   会触发视图更新
        修改 引用数据类型   可能触发视图更新

        数组方法
        push
        pop
        shift
        unshift
        splice  增删改
        sort
        reverse
        map     映射return
        reduce
        forEach
        filter
        find    查找某一个
        some    有一个满足就行
        every   所有的都必须满足
        concat  拼接
        slice   截取

        Vue 将被侦听的数组的编译方法进行了包裹，所有它们也将会触发视图更新
        变异数组方法    这些方法直接修改原来数组
        push
        pop
        shift
        unshift
        splice
        sort
        recerse

        非变异数组方法  这些方法不能改变原始数组 但可以返回一个新的数组
        map
        reduce
        forEach
        find
        some
        every
        concat
        slice

        实例方法                        全局方法
        vm.$set(array,index,newItem)    Vue.set     设置
        vm.$delete(arr,index)           Vue.delete  删除





 -->

</html>